<template>
	<view class="container" v-if="payInfo">
		<view class="uni-flex uni-column payment-wrap" v-show="paystatus == 'pay'">
			<view class="header">结算</view>
			<view class="body">
				<view class="info-wrap">
					<scroll-view scroll-y="true" class="info">
						<view class="payment-money">费用总额：￥{{ payInfo.original_money | moneyFormat }}</view>

						<block v-if="promotionShow">
							<view class="title">营销优惠</view>
							<view class="uni-flex">
								<view class="type-item"
									:class="{ disabled: payInfo.offset.coupon_array.member_coupon_list.length == 0, active: discount.coupon_id }"
									@click="selectCoupon" v-if="payInfo.offset.coupon_array">
									<view class="iconfont iconyouhuiquan"></view>
									<view class="name" v-show="!discount.coupon_id">
										优惠券
										<text class="text" v-if="payInfo.offset.coupon_array.member_coupon_list.length">
											（{{ payInfo.offset.coupon_array.member_coupon_list.length }}张可用）
										</text>
									</view>
									<view class="name" v-show="discount.coupon_id">
										优惠券抵扣
										<text class="text">{{ payInfo.coupon_money }}元</text>
									</view>
									<view class="iconfont iconxuanzhong"></view>
								</view>
								<view class="type-item" :class="{ active: discount.reduction }" @click="reduction"
									v-if="payInfo.collectmoney_config.reduction == 1">
									<view class="iconfont iconjianmianjine"></view>
									<view class="name" v-if="discount.reduction"
										@click.stop="openMoneyPopup({ title: '减免金额', money: $util.moneyFormat(discount.reduction), type: 'reduction' })">
										减免
										<text class="text">{{ discount.reduction }}元</text>
									</view>
									<view v-else class="name">减免金额</view>
									<view class="iconfont iconxuanzhong"></view>
								</view>
							</view>
						</block>

						<block v-if="payInfo.offset.point_array || payInfo.offset.balance">
							<view class="title">账户余额</view>
							<view class="uni-flex">
								<view class="type-item account"
									:class="{ active: discount.is_use_balance, disabled: balance == 0 }"
									@click="useBalance" v-if="payInfo.offset.balance">
									<view class="iconfont iconyue"></view>
									<view class="name" v-if="discount.is_use_balance">
										余额支付
										<text class="text">{{ payInfo.total_balance | moneyFormat }}元</text>
									</view>
									<view class="name" v-else>
										账户余额
										<text class="text" v-if="balance > 0">{{ balance | moneyFormat }}元</text>
									</view>
									<view class="iconfont iconxuanzhong"></view>
								</view>
								<view class="type-item account"
									:class="{ active: discount.is_use_point, disabled: payInfo.offset.point_array.point == 0 }"
									@click="usePoint" v-if="payInfo.offset.point_array">
									<view class="iconfont iconjifen1"></view>
									<view class="name" v-if="discount.is_use_point">
										积分抵扣
										<text
											class="text">{{ payInfo.point_money | moneyFormat }}元（{{ parseInt(payInfo.offset.point_array.point) }}积分）</text>
									</view>
									<view class="name" v-else>
										账户积分
										<text class="text" v-if="memberInfo.point">{{ memberInfo.point }}积分</text>
									</view>
									<view class="iconfont iconxuanzhong"></view>
								</view>
							</view>
						</block>

						<view class="title">支付方式</view>
						<view class="uni-flex pay-type">
							<block v-for="(item, key,index) in payType" :key="key">
								<view class="type-item" @click="switchPayType(item.type)"
									:class="{ active: item.type == type }">
									<view class="pay-icon iconfont" :style="{ background: item.background }"
										:class="item.icon"></view>
									<view class="name">{{ item.name }} [{{ item.hotKey }}]</view>
									<view class="iconfont iconxuanzhong"></view>
								</view>
							</block>
							<view class="type-item" @click="switchMemberCode()"
								:class="{ active: discount.is_use_balance}">
								<view class="pay-icon iconfont iconhuiyuanma" :style="{ background: '#F7861E' }">
								</view>
								<view class="name">
									<text>会员码 [M]</text>
									<template v-if="discount.is_use_balance">
										<text style="margin-left: 0.05rem;">(</text>
										<text style="margin-left: 0.05rem;">使用余额</text>
										<text class="text">{{ payInfo.total_balance | moneyFormat }}元</text>
										<text style="margin-left: 0.05rem;">)</text>
									</template>
								</view>
								<!-- <view class="iconfont iconxuanzhong"></view> -->
							</view>
						</view>
						<view class="remark-info" v-if="payInfo.remark">备注：{{ payInfo.remark }}</view>
					</scroll-view>
					<view class="button-wrap">
						<view class="print-ticket">
							<checkbox-group @change="autoPrintTicket = !autoPrintTicket">
								<label>
									<checkbox :checked="autoPrintTicket" style="transform:scale(0.7)" />
									<text>打印小票</text>
								</label>
							</checkbox-group>
						</view>
						<button class="default-btn" @click="openRemark">备注</button>
						<button class="default-btn cancel-btn" plain @click="cancelPayment">取消 [Esc]</button>
						<button class="primary-btn" @click="confirm()"
							v-if="type != 'third' || payInfo.pay_money == 0">收款 [Enter]</button>
						<button class="primary-btn" @click="thirdConfirm()" v-else>收款 [Enter]</button>
					</view>
				</view>
				<scroll-view scroll-y="true" class="bill-wrap">
					<view class="title">支付明细</view>
					<view class="body">
						<view class="bill-info">
							<view>费用总额</view>
							<view>￥{{ payInfo.original_money | moneyFormat }}</view>
						</view>
						<view class="block-title"><text>营销优惠</text></view>
						<view class="bill-info">
							<view>减免金额</view>
							<view class="text">
								-￥{{ payInfo.offset.reduction ? $util.moneyFormat(payInfo.offset.reduction) : '0.00' }}
							</view>
						</view>
						<view class="bill-info" v-if="payInfo.offset.coupon_array">
							<view>优惠券</view>
							<view class="text">-￥{{ $util.moneyFormat(payInfo.coupon_money) }}</view>
						</view>
						<view class="bill-info" v-if="payInfo.offset.hongbao_array">
							<view>红包</view>
							<view class="text">-￥{{ $util.moneyFormat(payInfo.hongbao_money) }}</view>
						</view>
						<view class="bill-info" v-if="payInfo.offset.point_array">
							<view>积分抵扣</view>
							<view class="text">-￥{{ $util.moneyFormat(payInfo.point_money) }}</view>
						</view>
						<block v-if="payInfo.offset.balance">
							<view class="block-title"><text>余额抵扣</text></view>
							<view class="bill-info">
								<view>余额支付</view>
								<view>-￥{{ $util.moneyFormat(payInfo.total_balance) }}</view>
							</view>
						</block>
						<view class="block-title"><text>支付方式</text></view>
						<view class="bill-info">
							<view>{{ payType[type].name }}</view>
							<view v-show="type == 'cash'">
								￥{{ payInfo.cash > 0 ? $util.moneyFormat(payInfo.cash) : $util.moneyFormat(payInfo.pay_money) }}
							</view>
							<view v-show="type != 'cash'">￥{{ payInfo.pay_money | moneyFormat }}</view>
						</view>
						<view class="block-title"></view>
						<view class="bill-info">
							<view>需支付</view>
							<view>￥{{ payInfo.pay_money | moneyFormat }}</view>
						</view>
						<view class="bill-info">
							<view>实付</view>
							<view v-show="type == 'cash'">
								￥{{ payInfo.cash > 0 ? $util.moneyFormat(payInfo.cash) : $util.moneyFormat(payInfo.pay_money) }}
							</view>
							<view v-show="type != 'cash'">￥{{ payInfo.pay_money | moneyFormat }}</view>
						</view>
						<view class="bill-info" v-if="payInfo.cash_change > 0">
							<view>找零</view>
							<view>￥{{ payInfo.cash_change | moneyFormat }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 支付结果 -->
		<view class="uni-flex uni-column pay-result" v-show="paystatus == 'success'">
			<view class="body status">
				<view class="iconfont iconchenggong"></view>
				<view class="msg">收款成功</view>
			</view>
			<view class="footer">
				<button class="primary-btn" @click="paySuccess">继续收款 [Enter]（{{ autoComplete.time }}s）</button>
			</view>
		</view>

		<uni-popup ref="moneyPopup" type="center">
			<view class="money-wrap">
				<view class="head">
					<text>{{ moneyPopup.title }}</text>
					<text class="iconfont iconguanbi1" @click="$refs.moneyPopup.close()"></text>
				</view>
				<view class="content-wrap">
					<view class="unit">￥</view>
					<view class="money">{{ moneyPopup.money }}</view>
				</view>
				<view class="keyboard-wrap">
					<view class="num-wrap">
						<view class="key-item" @click="keydown('1')">1</view>
						<view class="key-item" @click="keydown('2')">2</view>
						<view class="key-item" @click="keydown('3')">3</view>
						<view class="key-item" @click="keydown('4')">4</view>
						<view class="key-item" @click="keydown('5')">5</view>
						<view class="key-item" @click="keydown('6')">6</view>
						<view class="key-item" @click="keydown('7')">7</view>
						<view class="key-item" @click="keydown('8')">8</view>
						<view class="key-item" @click="keydown('9')">9</view>
						<view class="key-item" @click="keydown('00')">00</view>
						<view class="key-item" @click="keydown('0')">0</view>
						<view class="key-item" @click="keydown('.')">.</view>
					</view>
					<view class="operation-wrap">
						<view class="delete" @click="deleteCode">删除 [Del]</view>
						<view class="delete" @click="moneyPopup.money = ''">清空</view>
						<view class="confirm" @click="moneyPopupConfirm()">确认<br /> [Enter]</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="couponPopup" type="center"
			v-if="payInfo.offset.coupon_array && payInfo.offset.coupon_array.member_coupon_list.length">
			<view class="coupon-wrap">
				<view class="head">
					<text>选择优惠券</text>
					<text class="iconfont iconguanbi1" @click="$refs.couponPopup.close()"></text>
				</view>
				<scroll-view scroll-y="true" class="body">
					<view class="list">
						<view class="item"
							:class="{ active: discount.coupon_id && discount.coupon_id == item.coupon_id }"
							v-for="(item, index) in payInfo.offset.coupon_array.member_coupon_list" :key="index"
							@click="selectCouponItem(item)">
							<view class="money" v-show="item.type == 'discount'">
								{{ item.discount }}
								<text class="unit">折</text>
							</view>
							<view class="money" v-show="item.type != 'discount'">
								<text class="unit">￥</text>
								{{ item.coupon_money }}
							</view>
							<view class="info">
								<view class="title">{{ item.coupon_name }}</view>
								<view class="limit">
									{{ item.at_least == 0 ? '无门槛券' : '满' + item.at_least + '可用' }}
									{{ item.type == 'discount' && item.discount_limit > 0 ? ',最多优惠' + item.discount_limit : '' }}
								</view>
								<view class="time" v-if="item.end_time">{{ item.end_time | timeFormat('y-m-d') }}前可用
								</view>
								<view class="time" v-else>长期有效</view>
							</view>
							<view class="iconfont iconxuanzhong"></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>

		<!-- 扫码枪支付弹窗 -->
		<uni-popup ref="thirdPopup" type="center" @change="popupChange">
			<view class="third-popup">
				<view class="head">
					<text>请选择扫码方式</text>
					<text class="iconfont iconguanbi1" @click="$refs.thirdPopup.close()"></text>
				</view>
				<view class="money">扫码收款￥{{ payInfo.pay_money | moneyFormat }}</view>
				<view class="scan-code-type" v-if="type == 'third'">
					<view class="type-item" :class="{ active: scanCodeType == 'scancode' }"
						@click="scanCodeType = 'scancode'">扫码枪</view>
					<view class="type-item" :class="{ active: scanCodeType == 'qrcode' }"
						@click="scanCodeType = 'qrcode'">二维码</view>
				</view>
				<view class="content-wrap">
					<view class="qrcode-wrap" v-show="scanCodeType == 'qrcode'">
						<block v-if="payQrcode.length">
							<view class="qrcode-item" v-for="(item, index) in payQrcode" :key="index">
								<image :src="item.qrcode.replace(/[\r\n]/g, '')" mode="widthFix" class="qrcode"
									v-if="item.qrcode.indexOf('data:image') != -1"></image>
								<image :src="$util.img(item.qrcode)" mode="widthFix" class="qrcode" v-else></image>
								<image :src="$util.img(item.logo)" mode="widthFix" class="logo"></image>
							</view>
						</block>
						<view class="empty" v-else>没有可用的收款二维码</view>
					</view>
					<view class="scancode-wrap" v-show="scanCodeType == 'scancode'">
						<view>
							<input type="number" v-model="authCode" :class="{ focus: scancodeFocus }"
								:focus="scancodeFocus" placeholder="请点击输入框聚焦扫码或输入付款码" @confirm="scancode"
								@focus="scancodeFocus = true" @blur="scancodeFocus = false" />
							<text class="iconfont icondelete" v-show="authCode.length > 0"
								@click="clearAuthCode"></text>
						</view>
						<image :src="$util.img('public/uniapp/cashier/scan_code_tip.png')" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 使用账号余额，验证付款码/手机号 -->
		<uni-popup ref="safeVerifyPopup" type="center">
			<view class="safe-verify-popup">
				<view class="header">
					<view class="type-wrap" v-if="active == 'memberCodePopup'">
						<view class="item">付款码</view>
					</view>
					<view class="type-wrap" v-else-if="payInfo.collectmoney_config.sms_verify == 1">
						<view class="item" :class="{ active: safeVerifyType == 'payment_code' }"
							@click="changeSafeVerifyType('payment_code')">付款码</view>
						<view class="item" :class="{ active: safeVerifyType == 'sms_code' }"
							@click="changeSafeVerifyType('sms_code')">短信验证码</view>
					</view>
					<text class="iconfont iconguanbi1" @click="$refs.safeVerifyPopup.close()"></text>
				</view>
				<view class="content" v-show="safeVerifyType == 'payment_code'">
					<view class="scancode-wrap">
						<view class="input-wrap">
							<view>
								<input type="number" v-model="paymentCode" :class="{ focus: scancodeFocus }"
									:focus="scancodeFocus" placeholder="请点击输入框聚焦扫码或输入付款码" @confirm="verifyPaymentCode"
									@focus="scancodeFocus = true" @blur="scancodeFocus = false"
									placeholder-class="placeholder" />
								<text class="iconfont icondelete" v-show="paymentCode.length > 0"
									@click="clearPaymentCode"></text>
							</view>
							<button class="primary-btn" @click="verifyPaymentCode">确认 [Enter]</button>
						</view>
						<image :src="$util.img('public/uniapp/cashier/scan_code_tip.png')" mode="widthFix"></image>
					</view>
				</view>
				<view class="content" v-show="safeVerifyType == 'sms_code' && active == 'safeVerifyPopup'">
					<block v-if="payInfo.member_account">
						<view class="tip">将发送验证码到该手机</view>
						<view class="mobile">
							{{ payInfo.member_account.mobile.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2') }}
						</view>
						<view class="sms-code">
							<view>
								<input type="number" v-model="smsCode" class="sms-code" placeholder="请输入验证码"
									:focus="scancodeFocus" placeholder-class="placeholder" @focus="scancodeFocus = true"
									@blur="scancodeFocus = false" />

								<text class="iconfont icondelete" v-show="smsCode.length > 0"
									@click="clearSmsCode"></text>
							</view>
							<text class="send-tip" @click="sendMobileCode"
								:class="{ disabled: dynacodeData.isSend }">{{ dynacodeData.codeText }}</text>
						</view>
						<button class="primary-btn" @click="verifySmsCode">确认 [Enter]</button>
					</block>
					<view v-else>该会员尚未绑定手机号，无法使用该验证方式</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="remarkPopup" type="center">
			<view class="remark-wrap">
				<view class="header">
					<text class="title">备注</text>
					<text class="iconfont iconguanbi1" @click="$refs.remarkPopup.close()"></text>
				</view>
				<view class="body"><textarea v-model="remark" placeholder="填写备注信息" placeholder-class="placeholder-class"
						@keydown.enter="remarkConfirm" /></view>
				<view class="footer"><button type="default" class="primary-btn" @click="remarkConfirm">确认
						[ENTER]</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import payment from './nc-payment.js';
	export default {
		name: 'ncPayment',
		mixins: [payment]
	};
</script>

<style lang="scss">
	@import './nc-payment.scss';
</style>